<%@ page contentType="text/html; charset=UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
         <link rel="stylesheet" type="text/css" href="third-party/jQuery-UI-FileInput/css/enhanced.css">
         <!--daterangepicker-->
        <script type="text/javascript" src="<%=basePath%>third-party/jQuery-UI-Date-Range-Picker/js/date.js"></script>
        <script type="text/javascript" src="<%=basePath%>third-party/jQuery-UI-Date-Range-Picker/js/daterangepicker.jQuery.js"></script>
        <!-- FileInput -->
        <script src="<%=basePath%>third-party/jQuery-UI-FileInput/js/enhance.min.js" type="text/javascript"></script>
        <script src="<%=basePath%>third-party/jQuery-UI-FileInput/js/fileinput.jquery.js" type="text/javascript"></script>
		<!-- editor area -->
		
		<script language="Javascript" type="text/javascript" src="<%=basePath%>/edit_area/edit_area_full.js"></script>
		<script language="Javascript" type="text/javascript" src="<%=basePath%>/js/learngoapp.js"></script>
		<script src="<%=basePath%>/js/mg.js" type="text/javascript"></script>
		<script src="<%=basePath%>/js/jquery.transform.min.js" type="text/javascript"></script>
		<script src="<%=basePath%>/js/jquery.bez.min.js" type="text/javascript"></script>
		<script type="text/javascript">var bez = $.bez([.19,1,.22,1]); var bezcss = ".19,1,.22,1";</script> <!-- bezier animations -->
		
<!-- <div class="main-content"> -->
		<div class="main-content-left">
			<form action='' method='post'>
				<fieldset>
					<legend>Online Coding </legend>
			<textarea id="learngoEditor" style="height: 425px; width: 100%;" name="learngoContent">
			/**
			 * @author liulxiang
			 * 
			 * learngo coding 测试
			 * 
			 */
			package com.learngo;
			public class learngoHello {
				public static void main(String[] args) {
					System.out.println("welcome u to use leargo to learn!");
				}
			
			}
				</textarea>
				</fieldset>
			</form>
       </div>
       <div class="main-content-middle">
              <div class="main-content-middle-tools">
                    <button class="btn btn-large btn-block btn-primary" type="button">编译</button>
                    <a href="#headLoginModal" class="btn btn-large btn-block" data-toggle="modal">运行</a>
                    <a href="#saveFileModal" class="btn btn-large btn-block" data-toggle="modal">保存</a>
               </div>
       
       </div>   
          
          <div class="main-content-right">
                <div class="main-content-right-content">
                                                编译结果 显示：
            </div>
           </div>
           


     <script language="javascript" type="text/javascript">		
		editAreaLoader.init({
			id: "learngoEditor"	// id of the textarea to transform	
			,start_highlight: true	
			,font_size: "8"
			,font_family: "verdana, monospace"
			,allow_resize: "y"
			,allow_toggle: false
			,language: "en"
			,syntax: "java"	
			,toolbar: "new_document, save, load,fullscreen, |, search, go_to_line, |, undo, redo, |, select_font, |,syntax_selection,|, change_smooth_selection, highlight, reset_highlight"
			,syntax_selection_allow: "java,css,html,js,php,python,vb,xml,c,cpp,sql,basic,pas,brainfuck"
			,show_line_colors: true
			,load_callback: "my_load"
			,save_callback: "my_save"
		});
		
		// callback functions
		function my_save(id, content){
			alert("Here is the content of the EditArea '"+ id +"' as received by the save callback function:\n"+content);
		}
		
		function my_load(id){
			editAreaLoader.setValue(id, "The content is loaded from the load_callback function into EditArea");
		}
		
		function toogle_editable(id)
		{
			editAreaLoader.execCommand(id, 'set_editable', !editAreaLoader.execCommand(id, 'is_editable'));
		}
</script>		

		